/*
 * @Author: Zero
 * @Date: 2019-11-15 09:54:28
 * @Last Modified by: Zero
 * @Last Modified time: 2019-11-15 15:58:36
 */
<template>
  <div class="home-header">
    <div class="home-header__search clearfix center-block">
      <div class="home-header__search--warp pull-left">
        <h2>欢迎来到江西住建云</h2>
        <div class="home-header__search--input">
          <div class="input-group">
            <span class="input-group-btn">
              <i class="dtFont dtFont-sousuo"></i>
            </span>
            <input class="form-control" type="text" v-model="search" placeholder="请输入您要查询的事项" />
            <span class="input-group-btn">
              <button class="btn btn-default" @click="searchHandler" type="button">搜索</button>
            </span>
          </div>
        </div>
        <div class="home-header__search--tags">
          <p>
            热门搜索：
            <a href="#">可研审批</a>
            <a href="#">施工许可证办理</a>
            <a href="#">招投标</a>
            <a href="#">施工许可证办理</a>
            <a href="#">注册</a>
            <a href="#">登录</a>
          </p>
        </div>
      </div>
    </div>

    <div class="home-header__tab">
      <div class="home-header__tab--warp clearfix">
        <a href="http://zjy.jxjst.gov.cn:8060" class="clearfix" target="_blank">
          <div class="pull-left">
            <i class="dtFont dtFont-gerenfuwupingtaidenglu"></i>
          </div>
          <div class="this-text">
            <h4>个人服务平台登录</h4>
            <p>这是提示样式</p>
          </div>
        </a>

        <a href="http://zjy.jxjst.gov.cn:8040" class="clearfix" target="_blank">
          <div class="pull-left">
            <i class="dtFont dtFont-qiyefuwupingtaidenglu"></i>
          </div>
          <div class="this-text">
            <h4>企业服务平台登录</h4>
            <p>这是提示样式</p>
          </div>
        </a>

        <a href="http://zjy.jxjst.gov.cn:9092/jsdwLogin" class="clearfix" target="_blank">
          <div class="pull-left">
            <i class="dtFont dtFont-jianshedanweifuwupingtaidenglu"></i>
          </div>
          <div class="this-text">
            <h4>建设单位服务平台登录</h4>
            <p>这是提示样式</p>
          </div>
        </a>

        <a href="http://zjy.jxjst.gov.cn:8050" class="clearfix" target="_blank">
          <div class="pull-left">
            <i class="dtFont dtFont-zhengwuguanlipingtaidenglu"></i>
          </div>
          <div class="this-text">
            <h4>政务管理平台登录</h4>
            <p>这是提示样式</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: ""
    }
  },
  methods: {

    searchHandler() {
      //console.log(this.search)
      if (this.search !== "") {
        this.$router.push({
          path: "/dataService/search",
          query: { search: this.search }
        });
      } else {
        this.$message({
          message: "请输入搜索内容",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.home-header {
  padding-top: 150px;
  height: 580px;
  position: relative;
 // background: url(/static/img/index-bg.07c1cab.png) no-repeat center;
  background: url(../../assets/images/index-bg.png) no-repeat center;
  .home-header__search {
    .home-header__search--warp {
      width: 540px;
      padding-top: 50px;
      h2 {
        color: white;
        font-size: 45px;
        margin-bottom: 40px;
      }

      .home-header__search--input {
        .input-group {
          display: table;
          border-collapse: separate;
          position: relative;
          .input-group-btn{
            width: 1%;
            font-size: 0;
            white-space: nowrap;
            vertical-align: middle;
            .dtFont-sousuo {
              display: inline-block;
              width: 40px;
              height: 60px;
              background: white;
              color: #9E9E9E;
              font-size: 16px;
              line-height: 60px;
              text-align: center;
            }
            .btn {
              height: 60px;
              width: 100px;
              font-size: 18px;
              background: #FF6F27;
              border: none;
              color: white;
              margin-left: 0!important;
              border-radius: 0;
            }
          }
          .form-control {
            height: 60px;
            font-size: 16px;
            border-color: #fff;
            border: none!important;
            padding-left: 0;
          }
        }
      }

      .home-header__search--tags {
        margin-top: 15px;
        p {
          color: #ffffff;
          a {
            display: inline-block;
            margin-right: 5px;
            font-size: 14px;
            color: rgba(200,224,255,1);
          }
          a:hover {
            color: #ffd632;
          }
        }
      }
    }
  }

  .home-header__tab {
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0.42);
    position: absolute;
    bottom: 0;
    .home-header__tab--warp {
      width: 1180px;
      height: 100px;
      margin: 0 auto;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.3);
      a {
        width: 25%;
        height: 100%;
        float: left;
        padding-top: 25px;
        padding-left: 44px;
        position: relative;
        .this-text {
          padding: 3px 0 0 10px;
          float: left;
        }
      }
    }
  }
}
</style>
